<template>
    <div class="header-container" width="100%">
        <el-menu 
        :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
         background-color="rgb(13 71 124)" text-color="#fff" >
            <el-col :span="20">
                <h1 style="text-align:center;color: antiquewhite;">TMS 物流管理系统 <small>{{showTime}}</small></h1>
            </el-col>
            <el-col :span="2">
                <p style="text-align:end;color: white">管理员:{{ userInfo.username }}</p>
            </el-col>
            <el-col :span="2">
                <el-button size="small" style="margin-top:10px;" @click="logout()">
                    <i class="el-icon-right"></i>
                    退出登录
                </el-button>
            </el-col>
        </el-menu>
    </div>
</template>

<script>
import * as moment from 'moment'; 
export default {
    data() {
        return {
            activeIndex2: '1',
            isCollapse: false,
            changeIcon: 'el-icon-s-fold',       // 默认为展开状态
            showTime: '',
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        logout(){
            this.$store.dispatch('admin/logout')
                .then(
                    ()=>{
                        this.$message.success('欢迎下次登录')
                        this.$router.replace({path: '/'})
                    }
                )
        }
    },
    created(){
        if(!this.$store.getters.adminname){
            this.$store.dispatch('admin/getInfo')
        }
    },  
    computed:{
        userInfo(){
            return {
                username : this.$store.getters.username
            }
        }
    },
    mounted() {
        // 每隔一秒就更新时间
        setInterval(
            () => {
               this.showTime = moment(new Date()).format('YYYY 年 MM 月 DD 日 HH:mm:ss')
            }
            , 1000)

    }

}
</script>

<style lang="scss" scoped>
.header-container {
    padding: 0px 0px;
    
}
</style>